<!--
 * @Author: Jayken
 * @Email: jaykenxie@outlook.com
 * @Date: 2019-08-06 14:03:22
 -->
<template>
  <div class="option">
    <Form :label-width="100" :model="formData" :rules="optRuleValidate" ref="optRefs">
      <Form-item :label="$t('module.extend.label')" prop="label">
        <Input
          style="width:200px"
          type="text"
          :maxlength="30"
          v-model="formData.label"
          
        />
      </Form-item>
      <Form-item :label="$t('module.extend._value')" prop="value">
        <Input
          style="width:200px"
          type="text"
          :maxlength="30"
          v-model="formData.value"
          
        />
      </Form-item>
      <Form-item :label="$t('module.extend.disabled')" prop="disabled">
        <Select  style="width:200px" v-model="formData.disabled">
          <Option v-for="type in typeList" :value="type.val" :key="type.val">{{type.name}}</Option>
        </Select>
      </Form-item>
    </Form>
  </div>
</template>
<script>
import locales from "./locales.js";

export default {
  name: "addOption",
  mixins: [locales],
  data: () => ({
    formData: {
      disabled: "0"
    }
  }),
  props: {
    datas: {
      type: Object,
      data: () => ({})
    },
    options: {
      type: Array,
      default: []
    }
  },
  computed: {
    typeList() {
      return [
        { name: this.$t("module.extend.disabled"), val: "1" },
        { name: this.$t("module.extend.nodisabled"), val: "0" }
      ];
    },
    actions() {
      const action = [
        {
          text: this.$t("common.save"),
          theme: "primary",
          handle: () => this.saveHandler()
        },
        {
          text: this.$t("common.close"),
          handle: () => this.$emit("Close", {})
        }
      ];
      return action;
    },
    optRuleValidate() {
      const vm = this;
      const valueValidate = (rule, value, callback) => {
        if (value !== this.datas.value) {
          if (this.options.filter(option => option.value === value).length > 0) {
            callback(new Error(this.$t("module.extend.tip.attrValDuplicate")));
          }
          callback();
        }

        callback();
      };
      return {
        value: [
          { required: true, message: vm.$t("module.extend.tip.attrVal"), trigger: "blur" },
          { validator: valueValidate, trigger: "blur" }
        ],
        label: [{ required: true, message: vm.$t("module.extend.tip.title"), trigger: "blur" }]
      };
    }
  },
  watch: {
    datas: {
      handler(val = {}) {
        this.formData = {
          id: val.id || Math.random().toString().substring(2),
          label: val.label,
          value: val.value,
          disabled: val.disabled ? "1" : "0"
        };
        this.isModify = !!val.label;
      },
      immediate: true
    }
  },
  created() {
    this.$emit("SetTitle", this.$t("module.extend.addlable"));
    this.$emit("SetPageWidth", 400);
    this.$emit("SetPageActions", this.actions);
  },
  methods: {
    saveHandler() {
      this.$refs.optRefs.validate(v => {
        if (v) {
          const { disabled, label, value, id } = this.formData;
          const result = { id, label, value, disabled: disabled === "1" ? true : false };
          this.$emit("Close", { result, isModify: this.isModify });
        }
      });
    }
  }
};
</script>
<style scoped>
.option {
  min-height: 135px;
}
</style>
